// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426

// 封装 获取元素对象 函数
const qs = item => document.querySelector(item)
// console.log(qs('#province'));

// 配置 axios 请求根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

async function fn() {
    // todo ================  渲染 省份 数据逻辑
     const {data:{data:re1}} = await axios.get('/city/province')
    //   console.log(re1);

    // map 渲染数据
    const provinceStr = re1.map(item => `<option value="${item.province}">${item.name}</option>`).join('')

    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
    // 默认选择 安徽    编码 34
    qs('#province').value = '34' 



    // todo ================  渲染 城市 数据逻辑
    const {data:{data:re2}} = await axios({
        url: '/city/city',
        params: {
            provinceCode: '34'    // 这里选择的 34 是对应 安徽省的编码
        }
    })
    // console.log(re2);

    // map 渲染数据
    const cityStr = await re2.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    // console.log(cityStr);

    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
    // 默认选择 马鞍山    编码 05
    qs('#city').value = '05'



    // todo ================  渲染 县区 数据逻辑
    const {data:{data:re3}} = await axios({
        url: '/city/area',
        params: {
            provinceCode: '34',    // 这里选择的 34 是对应 安徽省的编码
            cityCode: '05'         // 这里选择的 05 是对应 马鞍山市的编码
        }
    })
    // console.log(re3);

    // map 渲染数据
    const areaStr = await re3.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    // console.log(areaStr);

    qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr
    // 默认选择 和县   编码 23
    qs('#county').value = '23'
}

fn()


//todo       省 发生改变的时候，省下面的城市数据也对应改变    change
qs('#province').addEventListener('change',async function(){
      console.log(this.value);    // 获得对应 省 的编码

    //  复制 渲染 城市的逻辑
      const {data:{data:re2}} = await axios({
        url: '/city/city',
        params: {
            provinceCode: this.value   
        }
    })

    // map 渲染数据
    const cityStr = await re2.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    // console.log(cityStr);
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr

     // 解决bug： 省份发生变化、清空县区
     qs('#county').innerHTML = `<option value="">请选择区县</option>`
})


// todo     城市 发生改变的时候，城市下面的 区县 数据也对应改变  change
qs('#city').addEventListener('change', async function(){
    console.log(this.value);    // 获得对应 城市 的编码

    //  复制 渲染 区县的逻辑
    const {data:{data:re3}} = await axios({
        url: '/city/area',
        params: {
            provinceCode: qs('#province').value,   
            cityCode: this.value       
        }
    })
 
    // map 渲染数据
    const areaStr = await re3.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    // console.log(areaStr);

    qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr   
})


